<mat-card *ngIf="isLoaded()">{{employee.firstName}} {{employee.lastName}}</mat-card>
<div class="content">
  <mat-progress-spinner *ngIf="!isLoaded()" mode="indeterminate">
  </mat-progress-spinner>
  <div *ngIf="isLoaded()">
    <mat-card>
      <mat-list>
        <mat-list-item>
          {{employee.role}}
            <mat-icon>email</mat-icon>
            {{employee.email}}
          <button mat-icon-button (click)="seeKanban()">
            <mat-icon>view_carousel</mat-icon>
            Kanban
          </button>
          <button mat-icon-button (click)="seeIndicators()">
            <mat-icon>equalizer</mat-icon>
            Indicators
          </button>
        </mat-list-item>
      </mat-list>
    </mat-card>
    <mat-card *ngIf="endHolidayDate != null">
      <div class="out-of-office">Out of office until {{endHolidayDate}}</div>
    </mat-card>
    <mat-card *ngIf="pendingHolidayStart != null && pendingHolidayEnd != null">
      <div class="pending-vacation">Out of office between {{pendingHolidayStart}} and {{pendingHolidayEnd}}</div>
    </mat-card>
    <mat-expansion-panel *ngIf="holidays != null && holidays.length > 0">
      <mat-expansion-panel-header>
        <mat-panel-title>
          All holidays
        </mat-panel-title>
      </mat-expansion-panel-header>

      <table mat-table [dataSource]="dataSource">

        <ng-container matColumnDef="startDate">
          <th mat-header-cell *matHeaderCellDef> Start Date</th>
          <td mat-cell *matCellDef="let row"> {{row.startDate}}</td>
        </ng-container>

        <ng-container matColumnDef="duration">
          <th mat-header-cell *matHeaderCellDef> Duraton</th>
          <td mat-cell *matCellDef="let row"> {{row.duration}}</td>
        </ng-container>

        <ng-container matColumnDef="holidayType">
          <th mat-header-cell *matHeaderCellDef> Holiday Type</th>
          <td mat-cell *matCellDef="let row"> {{row.holidayType}}</td>
        </ng-container>

        <ng-container matColumnDef="approvalState">
          <th mat-header-cell *matHeaderCellDef> Approval State</th>
          <td mat-cell *matCellDef="let row"> {{row.approvalState}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['startDate', 'duration', 'holidayType', 'approvalState']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['startDate', 'duration', 'holidayType', 'approvalState']"></tr>
      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    </mat-expansion-panel>

    <div *ngIf="isUserLoggedIn">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            Contract information
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="contract">
          <mat-icon>credit_card</mat-icon>
          {{employee.contract.accountNumber}}
          <mat-icon>flight_takeoff</mat-icon>
          {{employee.contract.daysOffPerYear}}
          <mat-icon>attach_money</mat-icon>
          {{employee.contract.salary}}
        </div>
      </mat-expansion-panel>
    </div>
    <div class="button-group">
      <button mat-raised-button *ngIf="isAdmin()" (click)="deleteEmployee()">Remove employee</button>
      <button mat-raised-button *ngIf="isManager() && isUserLoggedIn" (click)="manageRequests()">Manage holiday requests
      </button>
      <button mat-raised-button *ngIf="isUserLoggedIn" (click)="addHolidayRequest()">Take time off</button>
    </div>
  </div>
</div>
